<template>
	<view class="page-user">
		<view class="user-section" >
			<view class="info_box">
				<!-- <fu-image :src="detail.store_backdrop" errorImg="/static/logo.png" mode="aspectFill">
				</fu-image> -->
				<view class="info_image">
					<image class="swiper-image" :src="detail.store_backdrop" mode="widthFix"></image>
				</view>
				<!-- <view class="header-swiper">
					<view class="">
						{{info.store_backdrop}}
					</view>
					<swiper class="square-box square-dot" :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="1000" :circular="true" @change="swiperChange">
						<block v-for="(item, index) in info.store_backdrop" :key="index">
							<swiper-item>
								<view class="image-wrap">
									<image
				            v-if="index == 0 &&goods_info.videoInfo && goods_info.videoInfo.video"
				            class="play"
				            src="/static/management/play.png"
				            mode="widthFix"
				            @click="playVideo(goods_info.videoInfo.file)"
				          ></image> info.level_name
									
									<video v-show="info.level_name != '商城商家'"  :src="item" id="myVideo" style="width:750rpx;height:100%;" controls
									>
									</video>
									<image v-show="info.level_name == '商城商家'" :src="item" class="image" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</block>
					</swiper>
					<view class="num">
						{{ current + 1 }}/{{ info.store_backdrop.length }}  
					</view>
				</view> -->
				<view class="page-header"
					style="background-color: #fff;border-radius: 20rpx;margin:10rpx auto ; width: 95%;">
					<!-- <image src="../../../../static/home-bg.png" mode="widthFix" class="bg-img"></image> -->
					<view class="header-info flex solid-bottom">
						<view class="shop-logo flex justify-center">
							<view class="img">
								<fu-image :src="detail.store_logo" errorImg="/static/logo.png" mode="aspectFill">
								</fu-image>
								<text class="level flex align-center justify-center">{{apple_name[apply_type]}}</text>
							</view>
						</view>
						<view class="flex flex-direction text-white" style="">
							<view class="flex align-center">
								<text class="shop-name text-bold flex-sub ">{{detail.store_name}}</text>
							</view>
							<!-- <text class="text-sm margin-top-xs color-text">{{info.order ? info.order.wait_receive : '0'}} 人已下单  </text> -->
							<!-- <text class="text-sm margin-top-xs color-text">
								<view class="" style="margin-top: 0	rpx;">
									<fu-star :value="store_star"></fu-star> <text
										style="margin-left: 10rpx;">好评率{{(store_star/5)*100}}%</text>
								</view>
							</text> -->
						</view>
					</view>
					<view class="_left" style="padding: 25rpx;height: 50px;">
						<text>地址: </text>
						<text style="margin-left: 20rpx;">{{detail.store_province_name}}</text>
						<text>{{detail.store_city_name}}</text>
						<text>{{detail.store_district_name}}</text>
						<text>{{detail.store_address}}</text>
					</view>
				</view>
				<view class="general-view margin-lr margin-tp  bg-white padding radius-16"
					style="background-color: rgb(255, 255, 255); border-radius: 10px; margin: 5px auto; width: 95%;">
					<view class="shop-item bg-white justify-between align-center">
						<view style="text-align: center;">--商家介绍--</view>
						<view class=""
							style="display: block;width: 100%;margin-top: 15px;color: #1A1A1A;padding: 10px;">
							<!-- {{}} -->
							<rich-text :nodes="detail.store_introduce"> </rich-text>
						</view>
						
						<!-- <text>{{store_introduce}}</text> -->
					</view>
				</view>
			</view>
			
			<!-- 底部菜单start -->
			<view class="tools" v-if="orderShow== false ">
			  <view class="toolbar">
			   <!-- <view class="left">
						 stop_shop(2)
			      <view class="left-item" @tap="stopMerchant()" v-show="info.status == 1">
			        <text class="text-lg"> {{info.status == 1  ? '关闭店铺' : '开启店铺'}}</text>
			      </view>
			    </view> -->
			   <!-- <view class="right">
			     <view class="btn btn1" @tap="tuiMerchant()">
			        <text class="text-lg">店铺推广</text>
			      </view>
			      <view class="btn btn2" @click="handleJump"  data-url="/pages/user/user/info/index">
			        <text class="text-lg" style="color: #FC6296;">编辑店铺资料</text>
			      </view>
			    </view> -->
				<view class="bottom-btn" @click="handleJump"  data-url="/pages/user/user/info/index">
				  <text class="text-lg" style="color: #FC6296;">编辑店铺资料</text>
				</view>
			  </view>
			</view>
			<!-- 底部菜单end -->
			<fu-popup mode="bottom" :z-index="99999" v-model="orderShow" borderRadius="16" :safeAreaInsetBottom="true">
				<view class="cancel-order">
					<view class="cancel-order-title align-center">
						<view class="order-title-center justify-center align-center">
							<view class="text-000 text-lg text-blod" style="text-align: center;">关闭店铺</view>
						</view>
					</view>
					<view class="shop-item bg-white height-100 padding-lr  text-df flex justify-between align-center"  @click="stop_shop(1)">
						<view class="_left text-000">仅下架所有商品并关闭店铺</view>
						<view class="_right text-cut  text-cut  text-right">
							<text class="cuIcon-right margin-left-sm"></text>
						</view>
					</view>
					<view class="shop-item bg-white height-100 padding-lr  text-df flex justify-between align-center" @click="stop_shop(2)">
						<view class="_left text-000">申请退保证金下架所有商品并关闭店铺</view>
						<view class="_right text-cut  text-cut  text-right" >
							<text class="cuIcon-right margin-left-sm"></text>
						</view>
					</view>
					<view class="cancel-order-reason" style="height: 50px;">
						
					</view>
					
				</view>
			</fu-popup>
		</view>
		
		<fu-notwork></fu-notwork>
		
	</view>
</template>

<script>
	export default {
		data() {
			// return {
			// 	CustomBar: this.CustomBar,
			// 	StatusBar: this.StatusBar,
			// 	money: '', //余额
			// 	list: [],
			// 	isInit: false,
			// 	currentPage: 1,
			// 	currentPageSize: 10,
			// 	isMore: false
			// };
			return {
				orderShow:false,
				current: 0,
				uid: 0,
				shopLogo: '', //店铺logo
				shopName: '1111', //店铺名称
				certification_status: '',
				store_star: '',
				tabType: 'day',
				store_status: '',
				main_industry: '',
				main_industry_id: 0,
				level_name: '',
				apple_name: {
					1: "个人认证",
					2: "商家认证",
					3: "平台认证"
				},
				expiration_time: '',
				orderStatistics: '',
				order: '',
				money: [],
				store_address: "",
				store_backdrop: "",
				store_introduce: "",
				apply_type: "",
				tabList: [{
						name: '今日',
						type: 'day'
					},
					{
						name: '昨日',
						type: 'yesterday'
					}, {
						name: '总计',
						type: 'total'
					}
				],
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				money: '', //余额
				list: [],
				isInit: false,
				currentPage: 1,
				currentPageSize: 10,
				isMore: false,
				info: {
					store_backdrop: []
				},
				detail:{}
			};
		},
		onLoad(options) {

		},
		onShow() {
			this.list = [];
			// this.getMoney();
			this.getMoneyList();
			if (global.token) {
				// this.getShopInfo();
				this.getpostShopInfo()
				this.getMoney()
				this.$refs.one && this.$refs.one.getPageDataStatistics()
				this.$refs.one && this.$refs.two.getPageDataStatistics()
			} else {
				this.$util.navigateToLogin();
			}
		},
		onReachBottom() {
			this.getMoneyList()
		},
		computed: {
			// listReverse() {
			//   return this.list.reverse();
			// },
			headerHight() {
				let h = 'calc(900rpx + ' + this.StatusBar + 'px)';
				console.log('xxxxxxxxx', h)
				return h;
			}
		},
		methods: {
			changeStatus() {
				this.$api.post(global.apiUrls.closeShop, {
				})
				.then(res => {
					if (res.data.code == 1 ) {
						this.getShopInfo()
						// this.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					this.$message.info(res.data.msg);
					console.log(err)
				})
			},
			stop_shop(type){
				this.orderShow = false;
				if(type == 1){
					const that = this
					this.$util.showModal({
					  title: '提示',
					  content: '确定下架所有商品并关闭店铺？',
					  confirmColor: this.$store.state.themeColor,
					  success: res => {
					    if (res.confirm) {
								this.changeStatus()
					      // that.$store.commit('logout');
					      // uni.navigateBack();
					      // that.$store.dispatch('getCartList');
					    }
					  }
					});
				}
				if(type == 2){
					const that = this
					this.$util.showModal({
					  title: '提示',
					  content: '确定退保证金下架所有商品并关闭店铺？',
					  confirmColor: this.$store.state.themeColor,
					  success: res => {
					    if (res.confirm) {
								uni.navigateTo({
								  url: '/pages/user/wallet/card-bind/refund',
								});
					      // that.$store.commit('logout');
					      // uni.navigateBack();
					      // that.$store.dispatch('getCartList');
					    }
					  }
					});
				}
				
			},
			/**
			 * @description 打开取消订单弹窗
			 * @param {String,Number} order_sn 订单编号
			 */
			stopMerchant() {
				if(this.info.status == 0) {
					this.changeStatus()
					
				} else {
					this.orderShow = true;
				}
			},
			tuiMerchant(){
				const that = this
				this.$util.showModal({
				  title: '提示',
				  content: '确定要推广店铺？',
				  confirmColor: this.$store.state.themeColor,
				  success: res => {
				    if (res.confirm) {
						 that.$message.info('推广成功');
				      // that.$store.commit('logout');
				      // uni.navigateBack();
				      // that.$store.dispatch('getCartList');
				    }
				  }
				});
			},
			to_tixian() {
				uni.navigateTo({
					url: '/pages/user/wallet/withdraw/index'
				})
			},
			// 金额明细
			getMoneyList() {
				this.isInit = false
				if (this.isMore) return
				this.$api.post(global.apiUrls.getWithdrawDetail, {
						page: this.currentPage,
						list_rows: this.currentPageSize
					})
					.then(res => {
						this.isInit = true
						console.log('消费明细', res)
						if (res.data.code == 1 && res.data.data.list.length != 0) {
							if (this.currentPage == 1) this.list = [];
							this.list = this.list.concat(res.data.data.list);
							if (res.data.data.list.length == this.currentPageSize) {
								this.currentPage++;
							} else {
								this.isMore = false;
							}
						}
					})
					.catch(err => {
						this.isInit = true
						console.log(err)
					})
			},
			back() {
				uni.navigateBack();
			},
			// getMoney() {
			// 	let _this = this;
			// 	_this.$api.post(global.apiUrls.getMerchantMoney, {
			// 		partner_id: this.$store.state.userInfo.id
			// 	}).then(res => {
			// 		if (res.data.code == 1) {
			// 			_this.money = res.data.data.now_money;
			// 		}
			// 	}).catch(err => {
			// 		console.log(err, 'get_my_money')
			// 	})
			// }
			//获取店铺金额
			getMoney() {
				let _this = this;
				_this.$api.post(global.apiUrls.getMerchantMoney, {
					partner_id: this.$store.state.userInfo.id
				}).then(res => {
					if (res.data.code == 1) {
						_this.money = res.data.data;
					}
				}).catch(err => {
					console.log(err, 'get_my_money')
				})
			},
			/**
			 * @description 获取店铺信息
			 */
			getpostShopInfo(){
				this.$api.post(global.apiUrls.postShopInfo, {
					partner_id: this.$store.getters.userInfo.id
				}).then(res => {
					console.log(res)
					this.detail = res.data.data
					console.log(this.detail)
				})
			},
			getShopInfo() {
				this.$api.post(global.apiUrls.getShopIndexInfo, {
					merchant_id: this.$store.getters.userInfo.id,
					date_selection: this.tabType
				}).then(res => {
					
					if (res.data.code == 1) {
						let info = res.data.data;
						this.info = res.data.data;
						console.log(this.info, '999store_backdrop');
						this.orderStatistics = info.orderStatistics;
						this.order = info.order;
						this.myProduct = info.myProduct;
						this.certification_status = info.certification_status;
						this.store_star = info.store_star;
						this.store_status = info.store_status;
						this.main_industry = info.main_industry;
						this.level_name = info.level_name;
						this.expiration_time = info.expiration_time;
						this.shopLogo = info.shopLogo;
						this.shopName = info.shopName;
						this.store_address = info.store_address,
							this.store_backdrop = info.store_backdrop,
							this.store_introduce = info.store_introduce.replace(/\n/g, '<br/>'),
							this.apply_type = info.apply_type,
							this.main_industry_id = info.main_industry_id,
							this.uid = info.uid;
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	};
</script>

<style lang="scss">
	.bottom-btn{
		width: 300rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border: 1px solid #FC6296;
		color: #FC6296;
		border-radius: 80rpx;
		margin-top: 50rpx;
	}
	.info_image{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 50rpx 0;
	}
	.swiper-image{
		width: 690rpx;
	}
	.page-user {
		background: #F7F7F7;
		height: 100vh;
	}

	//头部 start
	.header-title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;

		.header-left {
			font-size: 42rpx;
			color: #666;
		}

		.header-center {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			color: #333;
			letter-spacing: 1rpx;

		}

		.header-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333;
			letter-spacing: 1rpx;
			text-align: right;
		}

		view {
			width: 33.3%;
		}
	}

	//头部 end


	.user-section {
		width: 100%;
		height: 416rpx;
		position: relative;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		// background: -webkit-gradient(linear, left top, right top, from(#000), to(#666));
		// background: -webkit-linear-gradient(left, #000, #666);
		// background: linear-gradient(to right, #000, #666);

		.image {
			width: 100%;
			height: 100%;
		}
	}

	//金额信息 start
	.info_box {

		position: relative;
		z-index: 99;

		//金额
		.money-wrap {
			width: 100%;

			.money-content {
				width: 100%;
				padding-top: 58rpx;

				.money {
					width: 100%;
					text-align: center;
					font-size: 48rpx;
					font-family: Arial;
					font-weight: bold;
					color: #FFFFFF;
				}

				.desc {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					height: 53rpx;
					line-height: 55rpx;
				}

				.money-btn-wrap {
					height: 53rpx;
					line-height: 55rpx;
					margin-top: 40rpx;
					padding-bottom: 60rpx;
					display: flex;
					justify-content: center;

					.money-btn {
						text-align: center;
						width: 184rpx;
						height: 60rpx;
						background: #FFFFFF;
						opacity: 1;
						border-radius: 50rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6464;
						opacity: 1;
						line-height: 60rpx;
					}
				}
			}

		}

	}

	//金额信息 end


	.box-center {
		width: 100%;
		height: 73rpx;
		background: rgba(#FF6464, 0.08);
		padding: 0 32rpx;
		color: #FF6464;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.detaiLiat {
		position: relative;
		width: 100%;
		background-color: #fff;

		.list {
			.ongg {
				height: 140rpx;
				width: calc(100% - 64rpx);
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;

				.buy-left {
					flex: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 116rpx;
						height: 116rpx;
						border-radius: 10rpx;
						margin-right: 25rpx;
					}

					.share-right {

						line-height: 53rpx;
						flex: 1;

						.desc {
							font-size: 28rpx;
							font-family: 'PingFang SC';
							font-weight: 500;
							flex: 1;
							color: #333333;

						}

						.create_time {

							font-size: 24rpx;
							font-family: 'PingFang-SC-Regular';
							color: #999999;
							opacity: 1;
						}
					}
				}

				.price-right {
					font-size: 40rpx;
					font-family: Arial;
					font-weight: 500;
					line-height: 45rpx;
					// color: #F9522A;
					padding-right: 10rpx;
				}
			}
		}
	}

	// 头部 start
	.page-header {
		width: 100%;
		position: relative;

		.bg-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.shop-logo {
			padding: 0 20rpx;

			.img {
				width: 146rpx;
				height: 146rpx;
				border-radius: 26rpx !important;
			}
		}

		.shop-name {
			font-size: 36rpx;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			color: #333333;
		}

		.color-text {
			color: #333333;
		}
	}

	.header-info {
		position: relative;
		z-index: 1;
		padding: 24rpx 24rpx 24rpx 24rpx;
	}

	// 头部 end

	.level {
		border-bottom: 1rpx solid #4E8CEE;
		border-bottom-left-radius: 26rpx;
		border-bottom-right-radius: 26rpx;
		font-size: 20rpx;
		// padding: 3rpx 10rpx;
		width: 100%;
		// margin: 0 10rpx;
		background-color: #4E8CEE;
		position: relative;
		top: -27rpx;
		color: #fff;
	}

	.auth {
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding: 3rpx 10rpx;
		margin: 0 10rpx;
	}

	.radius-16 {
		border-radius: 16rpx;
		overflow: hidden;
	}

	// 我的订单
	.my-order {
		image {
			width: 56rpx;
			height: 56rpx;
		}

		.item {
			position: relative;

			.jiaobiao {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				border-radius: 100rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: #FF6464;
				z-index: 9;
				transform: scale(0.65);
			}
		}
	}

	.general-view {
		z-index: 99;
		position: relative;
	}

	.tab-box {
		border: 1rpx solid $bgtheme;
		// padding: 3rpx 0;
		border-radius: 4rpx;

		.tab-item {
			padding: 5rpx 8rpx;
			border-radius: 4rpx;
			// margin: 0 3rpx;
			font-size: 24rpx;
		}

		.active {
			background-color: $bgtheme;
			color: #FFFFFF;
		}
	}

	.color-red {
		color: #FB2A25;
	}

	.day-view {
		height: 40rpx;
		width: 102rpx;
		border-radius: 20rpx;
		border: 1rpx solid #707070;
		color: #333333;
	}

	.margin-tp {
		margin-top: 20rpx;
	}

	.padding {
		padding: 16rpx;
	}

	.margin-top-sm {
		margin-bottom: 16rpx;
	}

	.header-swiper {
		width: 100%;
		padding-bottom: 100%;
		position: relative;

		.num {
			width: 72rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 20rpx;
			text-align: center;
			font-size: 24rpx;
			color: #ffffff;
			position: absolute;
			bottom: 16rpx;
			right: 32rpx;
		}

		.square-box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				.image-wrap {
					width: 100%;
					height: 100%;
					position: relative;

					.play {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 100rpx;
						height: 100rpx;
						z-index: 999;
					}

					.image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.text-color {
		color: #ff5001;
	}

	.video-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000000;
		z-index: 99999;
	}

	.myVideo {
		width: 750rpx;
	}
	.tools {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding-bottom: 0;
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
	  background-color: #ffffff;
	  /* box-shadow: 0px -1px 0px #eeeeee; */
	  z-index: 999;
	
	  .toolbar {
	    height: 100rpx;
	    display: flex;
		align-items: center;
		justify-content: center;
	    .left {
	      flex: 1;
	      // padding-left: 28rpx;
	      display: flex;
	      // justify-content: space-around;
	      align-items: center;
		  padding-left:40rpx;
	      width: 272rpx;
	
	      .left-item {
	        display: flex;
	        flex-direction: column;
	        font-size: 32rpx;
	        color: #333;
	        align-items: center;
	        position: relative;
	      }
	    }
	
	    .right {
	      /* display: flex;
	    align-items: center;
	    justify-content: space-between;*/
	      padding: 0 0 0 28rpx;
	      width: calc(100% - 272rpx);
	
	      display: flex;
	      align-items: center;
	      justify-content: center;
	
	      .btn {
	        width: 50%;
	        height: 80rpx;
	        text-align: center;
	        color: #ffffff;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;
	        // line-height: 1.3;
	      }
	
	      .btn1 {
	        background-color: #fff;
			border: 1px solid #DBDBDB;
			border-radius: 80rpx;
			color: #333;
	      }
	
	      .btn2 {
	        // background-color: $bgtheme;
			background-color: #fff;
			border: 1px solid #FC6296;
			color: #FC6296;
			border-radius: 80rpx;
	      }
	    }
	  }
	}
	.cancel-order {
		padding: 0 32rpx;
		box-sizing: border-box;
	
		.cancel-order-title {
			padding: 32rpx 0;
	
			.circle {
				width: 8rpx;
				height: 8rpx;
				background: rgba(255, 80, 1, 0.5);
				margin: 0 6rpx;
	
				&.shallow {
					background: rgba(255, 80, 1, 1);
				}
			}
		}
	
		.cancel-order-reason {
			.reason-item {
				height: 104rpx;
			}
		}
	
		.cancel-order-btn {
			margin: 48rpx 0 37rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(309deg, #fe3100 0%, #ff5a10 100%);
			border-radius: 45rpx;
		}
	}
	
	
</style>